<template>
  <div class="appoint_box">
    <el-scrollbar class="el_scrollbar" wrap-style="overflow-x:hidden;">
      <el-form ref="appointForm" :model="appointForm" :rules="appointRules" size="small" label-width="100px" class="appoint_form">
        <div class="form_item_box">
          <el-form-item label="客户姓名：">{{userInfo.name||'--'}}</el-form-item>
          <el-form-item label="客户手机：">{{userInfo.phone||'--'}}</el-form-item>
          <el-form-item label="预约到店：">{{userInfo.statusDesc||'--'}}</el-form-item>
        </div>
        <div class="form_item_box">
          <el-form-item label="预约门诊：">{{userInfo.hospitalName||'--'}}</el-form-item>
          <el-form-item label="预约时间：">{{userInfo.appointmentTime||'--'}}</el-form-item>
          <el-form-item label="责任人：">{{userInfo.principal||'--'}}</el-form-item>
        </div>
        <el-form-item label="成交金额：" prop="dealAmount">
          <el-input-number v-model="appointForm.dealAmount" class="a_input" :controls="false"></el-input-number>
        </el-form-item>
        <el-form-item label="收款金额：" prop="collectMoney">
          <el-input-number v-model="appointForm.collectMoney" class="a_input" :controls="false"></el-input-number>
        </el-form-item>
        <el-form-item label="反馈时间：" prop="feedbackTime">
          <el-date-picker v-model="appointForm.feedbackTime" class="a_input" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="缴费类型：" prop="dealType">
          <el-radio-group v-model="appointForm.dealType">
            <el-radio v-for="(item,index) in PAYMENTTYPE" :key="index" :label="item.id">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主诉项目：" prop="mainProject">
          <el-input v-model="appointForm.mainProject" class="a_input" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="全科项目：" prop="generalProject">
          <el-input v-model="appointForm.generalProject" class="a_input" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="结算总额：" prop="settleAmount">
          <el-input v-model="appointForm.settleAmount" class="a_input" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="本期结算：" prop="settleCurrent">
          <el-input v-model="appointForm.settleCurrent" class="a_input" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="结算规则：" prop="settleRule">
          <el-input v-model="appointForm.settleRule" type="textarea" rows="3" resize="none" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="门诊反馈：" prop="outpatientFeedback">
          <el-input v-model="appointForm.outpatientFeedback" type="textarea" rows="3" resize="none" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="appointForm.remark" type="textarea" rows="3" resize="none" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </div>
</template>
<script>
import { broadcast, deepClone, showToast } from "@/common/util";
import {
  GET_SETTLEMENTDETAILS_INFO,
  SAVE_APPOINTMENT_HANDLE,
  MODIFY_SETTLEMENTDETAILS,
} from "@/http/finance";
import { PAYMENTTYPE } from "@/common/constants";
export default {
  name: "AppointPage",
  props: {
    id: {
      type: [String, Number],
      default: "",
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      userInfo: {},
      appointForm: {},
      appointRules: {
        dealAmount: [
          { required: true, message: "请输入成交金额", trigger: "blur" },
        ],
        collectMoney: [
          { required: true, message: "请输入收款金额", trigger: "blur" },
        ],
        feedbackTime: [
          { required: true, message: "请选择反馈时间", trigger: "change" },
        ],
        dealType: [
          { required: true, message: "请选择缴费类型", trigger: "change" },
        ],
        mainProject: [
          { required: true, message: "请输入主诉项目", trigger: "blur" },
        ],
        generalProject: [
          { required: true, message: "请输入全科项目", trigger: "blur" },
        ],
        settleAmount: [
          { required: true, message: "请输入结算总额", trigger: "blur" },
        ],
        settleCurrent: [
          { required: true, message: "请输入本期结算", trigger: "blur" },
        ],
        settleRule: [
          { required: true, message: "请输入结算规则", trigger: "blur" },
        ],
        outpatientFeedback: [
          { required: true, message: "请输入门诊反馈", trigger: "blur" },
        ],
      },
      appointType: 1,
      PAYMENTTYPE,
    };
  },
  created() {
    console.log(this.info);
    this.userInfo = this.info;
    this.appointType = this.info.type;
    if (this.id) {
      this.getInfo();
    }
  },
  mounted() {},
  methods: {
    // 获取详情
    getInfo() {
      let _this = this;
      let oParams = {};
      oParams.id = this.id;
      GET_SETTLEMENTDETAILS_INFO(oParams).then((res) => {
        if (res.code != 200) {
          return false;
        }
        let obj = res.data;
        let options = {};
        if (obj) {
          _this.userInfo = res.data || {};
          options.collectMoney = obj.collectMoney;
          options.dealAmount = obj.dealAmount;
          options.dealType = Number(obj.dealType);
          options.feedbackTime = obj.feedbackTime;
          options.generalProject = obj.generalProject;
          options.mainProject = obj.mainProject;
          options.outpatientFeedback = obj.outpatientFeedback;
          options.remark = obj.remark;
          options.settleAmount = obj.settleAmount;
          options.settleCurrent = obj.settleCurrent;
          options.settleRule = obj.settleRule;
          _this.appointForm = options;
        }
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.appointForm);
      let oParams = { ...o };
      // 结算明细修改(2)、输出结算修订(3)
      if (this.info.type > 1) {
        oParams.orderId = this.userInfo.orderId;
        oParams.id = this.userInfo.id;
      } else {
        oParams.orderId = this.userInfo.id;
      }

      return oParams;
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      _this.$refs.appointForm.validate((valid) => {
        if (!valid) {
          _this.$emit("change");
          return false;
        }
        let oParams = _this.getParams();

        // 结算明细修改(2)、输出结算修订(3)
        if (_this.info.type > 1) {
          MODIFY_SETTLEMENTDETAILS(oParams).then((res) => {
            if (res.code != 200) {
              _this.$emit("change");
              return false;
            }
            showToast({
              message: "保存成功",
              type: "success",
            });
            _this.$emit("change", { id: "appointDialog" });
          });
          return false;
        }

        // 预约到期处理(1)
        SAVE_APPOINTMENT_HANDLE(oParams).then((res) => {
          if (res.code != 200) {
            _this.$emit("change");
            return false;
          }
          showToast({
            message: "保存成功",
            type: "success",
          });
          _this.$emit("change", { id: "appointDialog" });
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el_scrollbar {
  height: 400px;
}
.appoint_form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-right:20px;
  .el-form-item {
    flex: 0 0 50%;
  }
}
.form_item_box {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  .el-form-item {
    flex: 0 0 33%;
  }
}
.a_input {
  width: 100%;
  ::v-deep input {
    text-align: left;
  }
}
</style>